@charset "utf-8";

/*	-------------------------------------------------------------
	Lovely CSS - A CSS framework by Constantinos Demetriadis
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	URL:			www.ohmylovely.com/css-framework/
	Description:	Form CSS module
	Author:			Constantinos Demetriadis
	                - - - - - - - - - - - - - - - - - - - - - - -
					Original code by Prabhath Sirisena

	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	SVN Repository Info
	
	$Id: plg.forms.css 289 2010-03-17 15:02:11Z cdemetriadis $
	$HeadURL: http://lovely-css.googlecode.com/svn/trunk/lovely-css/plug-ins/plg.forms.css $
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Installation

	Add this line in your HTML:
		@import url("./lovely-css/plug-ins/plg.forms.css");

	Help?
		class formContainer	= This class should wrap the form - req div

	*/
	
		
	
/*	Form Container
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
		.formContainer {
			margin: 0px;
			padding: 0px; }
			

/*	Fieldset
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
		.formContainer form fieldset {
			margin: 10px 0;
			padding: 10px;
			border: #DDD 1px solid; }
			

/*	Legend
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
		.formContainer form fieldset legend {
			padding: 0 0.3em;
			font-weight: bold;
			color: #666; }
			

/*	Field Note
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
		.formContainer form fieldset p.note {
			margin-left: 170px;
			font-size: 0.8em;
			color: #333; }
			
			
			
/*	Form Items
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
		.formContainer form fieldset .formItem {
			clear: both;
			overflow: visible;
			padding: 0.25em 0; }
	
		.formContainer label, 
		.formContainer span.label {
			font-weight: bold;
			margin-right: 10px;
			width: 150px;
			padding: 3px 10px 3px 3px;
			display: block;
			float: left;
			text-align: right;
			position: relative; }
			
		/* Generic element styles */
		.formContainer input,
		.formContainer textarea {
			padding: 3px; }
		
		/* Required field icon (asterisk) */
		.formContainer label em, 
		.formContainer span.label em {
			position: absolute;
			right: 0;
			font-size: 120%;
			font-style: normal;
			color: #C00; }
			
		/* Error style */
		.formContainer .error label, 
		.formContainer .error span {
			color: #C00; }
			
		.formContainer .error .note {
			color: #C00; }
			
		.formContainer .error input {
			border-color: #C00;
			background-color: #FEF; }
			
			
		/* Mouse focus style */	
		.formContainer input:focus,
		.formContainer.error input:focus, 
		.formContainer textarea:focus {
			background-color: #FFC;
			border-color: #FC6; }
			
		/* Input */
		.formContainer input {
			width: 172px;
			border-width: 1px; }
			
		/* Textarea */
		.formContainer textarea {
			font-size: 120%;
			font-style: normal;
			width: 172px;
			height: 60px;
			border-width: 1px; }	
					
		/* File */
		.formContainer input.itemFile {
			width: 50px; }
		
		/* Control set - Radio and checkboxes */
		.formContainer .controlSet {
			padding: 0.25em 0;
			width: 200px;
			float: left; }
			
		.formContainer .controlSet label {
			padding-right: 5px;
			font-weight: normal;
			width: auto; }
			
		.formContainer .controlSet input {
			width: auto; }
			
		.formContainer .controlSet.vertical label {
			width: 166px;
			text-align: left; }
			
					
		/* Button Set */
		.formContainer .buttonSet {
			width: 240px;
			float: left;
		    padding-top: 0px; }
		    
		.formContainer .buttonSet input {
		    margin: 0 7px 7px 0;
		    cursor: pointer;
		    background-color: #f5f5f5;
		    border: 1px solid #dedede;
		    border-top: 1px solid #eee;
		    border-left: 1px solid #eee;
		    width: auto;
		    padding: 5px 10px; }
		    		    
		.formContainer input.buttonSubmit {
		    font-weight: bold;
		    color: #529214; }
		    
		.formContainer input.buttonSubmit:hover {
			background-color: #e6efc2;
			border-color: #c6d880;
			color: #529214; }
		    
		.formContainer input.buttonSubmit:active {
			background-color: #529214;
			border-color: #529214;
			color: #fff; }

			
		.formContainer input.buttonReset {
		    color: #d12f19; }
		    
		.formContainer input.buttonReset:hover {
			background: #fbe3e4;
			border-color: #fbc2c4;
			color: #d12f19; }
		    
		.formContainer input.buttonReset:active {
			background-color: #d12f19;
			border-color: #d12f19;
			color: #fff; }

			
		.formContainer input.buttonNeutral {
		    color: #666; }
		    
		.formContainer input.buttonNeutral:hover {
			background-color: #dff4ff;
			border-color: #c2e1ef;
			color: #336699; }
		    
		.formContainer input.buttonNeutral:active {
			background-color: #6299c5;
			border-color: #6299c5;
			color: #fff; }

			
			
			
			